<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YSL圣罗兰美妆官方网站 - 着我装者,着我妆</title>
    <link rel="stylesheet" href="/css/head/login.css">
    <link rel="stylesheet" href="/css/assets/reset.css">
    <link rel="stylesheet" href="/css/fangCSS/LinkSix.css">
    <link rel="stylesheet" href="/css/assets/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/head/header.css">
    <link rel="stylesheet" href="/css/foot/footer.css">
    <link rel="stylesheet" href="/css/assets/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/assets/bootstrap.min.css">
</head>

<body>
    <!--头部内容(龙)-->
    <div id="header"></div>
    <!--主体内容(this)-->
    <!-- ----------------------------------------- -->
    <!-- 顶部图 -->
    <div class="slice w-100">
        <!-- 01.webp -->
        <img src="/images/Brand Story/Link/06/01.webp" alt="LP-COMMITMENTS-STORY-3">
    </div>
    <div>
        <!-- 主体部分 -->
        <div class="slice-l w-100">
            <!--02.webp  -->
            <img src="/images/Brand Story/Link/06/02.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <!-- 03.webp -->
        <div class="slice-1 w-100">
            <img src="/images/Brand Story/Link/06/03.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <div class="slice-2 w-100">
            <img src="/images/Brand Story/Link/06/04.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <div class="slice-3 w-100">
            <img src="/images/Brand Story/Link/06/05.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <div class="slice-4 w-100">
            <img src="/images/Brand Story/Link/06/06.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <!-- 中部动画部分 -->
        <div class="swiper-content por ">
            <div class="swiper">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide ">
                        <img src="/images/Brand Story/Link/06/07.webp">
                    </div>
                    <div class="swiper-slide ">
                        <img src="/images/Brand Story/Link/06/08.webp">
                    </div>
                    <div class="swiper-slide">
                        <img src="/images/Brand Story/Link/06/09.webp">
                    </div>
                    <div class="swiper-slide">
                        <img src="/images/Brand Story/Link/06/10.webp">
                    </div>
                    <div class="swiper-slide">
                        <img src="/images/Brand Story/Link/06/10-1.webp">
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev swiper-button-black swiper-button-disabled"></div>
                <div class="swiper-button-next swiper-button-black"></div>
            </div>
        </div>
        <!-- 8.webp -->
        <div class="slice-2 w-100">
            <img src="/images/Brand Story/Link/06/11.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <!-- 9.webp -->
        <div class="slice-3 w-100">
            <img src="/images/Brand Story/Link/06/12.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <!-- png-13.webp跳转部分 -->
        <div class="slice-7 w-100">
            <img src="/images/Brand Story/Link/06/13.webp" alt="LP-COMMITMENTS-STORY-3">
            <div class="none-v">
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-8">
                    <div></div>
                </a>
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-9">
                    <div></div>
                </a>
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-10">
                    <div></div>
                </a>
            </div>
        </div>
        <div class="slice-8 w-100">
            <img src="/images/Brand Story/Link/06/14.webp" alt="LP-COMMITMENTS-STORY-3">
        </div>
        <!-- 09.webp跳转部分1 -->
        <div class="slice-9 w-100">
            <img src="/images/Brand Story/Link/06/15.webp" alt="LP-COMMITMENTS-STORY-3">
            <div class="none-v">
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-1">
                    <div></div>
                </a>
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-2">
                    <div></div>
                </a>
                <a href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-3">
                    <div></div>
                </a>
            </div>
        </div>
        <!-- ----------------------------------------- -->
        <!--底体内容(龙)-->
        <div id="footer"></div>

</body>
<script src="/js/assets/jquery.js"></script>
<script src="/js/assets/bootstrap.bundle.min.js"></script>
<script src="/js/assets/swiper-bundle.min.js"></script>
<script src="/js/head/header.js"></script>
<script src="/js/head/footer.js"></script>
<script src="/js/head/login.js"></script>
<script>
    var mySwiper = new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView: 3,


        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })        
</script>

</html>